<template>
    <div class="personal-profile">
        <header>
            <img :src="profilePicture" :alt="name" class="profile-pic" />
            <h1>{{ name }}</h1>
            <p>{{ bio }}</p>
        </header>

        <section class="profile-info">
            <ul>
                <li>姓名: {{ name }}</li>
                <li>职业: {{ job }}</li>
                <li>联系方式: {{ contact }}</li>
            </ul>
        </section>

        <footer>
            <p>版权所有 &copy; {{ currentYear }}</p>
        </footer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '鲁鲁修',
            bio: '创造世界，毁灭世界',
            job: 'gress使用者',
            contact: 'LLX@example.com',

            profilePicture: 'https://www.codelover.club/files/stutasks/userID_894/currNo_43/FtVXA9d7yV29O5KIIrL_Dj0BZxHE.jpg'
        };
    },
    computed: {
        currentYear() {
            return new Date().getFullYear();
        }
    }
};
</script>

<style scoped>
.personal-profile {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

header {
    text-align: center;
}

.profile-pic {
    border-radius: 10%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-bottom: 20px;
}

h1 {
    color: #040311;
}

p {
    color: #5710e6;
}

.profile-info {
    margin-top: 20px;
}

footer {
    text-align: center;
    margin-top: 30px;
    color: #999;
}
</style>